<template>
  <div class="reset-password">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>重置密码</span>
        </div>
      </template>
      <el-form
        :label-position="labelPosition"
        label-width="110px"
        :model="formData"
        :rules="rules"
        ref="formRef"
        style="max-width: 460px"
      >
        <el-form-item label="原密码：" prop="oldPwd">
          <el-input
            v-model="formData.oldPwd"
            placeholder="请输入原密码"
            :type="blinkOldPwd ? 'text' : 'password'"
          >
            <template #suffix>
              <el-icon v-if="!blinkOldPwd" @click="blinkHandler('blinkOldPwd')"
                ><Hide
              /></el-icon>
              <el-icon v-else @click="blinkHandler('blinkOldPwd')"
                ><View
              /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="newPwd">
          <el-input
            v-model="formData.newPwd"
            placeholder="请输入新密码"
            :type="blinkNewPwd ? 'text' : 'password'"
          >
            <template #suffix>
              <el-icon v-if="!blinkNewPwd" @click="blinkHandler('blinkNewPwd')"
                ><Hide
              /></el-icon>
              <el-icon v-else @click="blinkHandler('blinkNewPwd')"
                ><View
              /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="确认新密码：" prop="verify">
          <el-input
            v-model="formData.verify"
            placeholder="请确定新密码"
            :type="blinkVerify ? 'text' : 'password'"
          >
            <template #suffix>
              <el-icon v-if="!blinkVerify" @click="blinkHandler('blinkVerify')"
                ><Hide
              /></el-icon>
              <el-icon v-else @click="blinkHandler('blinkVerify')"
                ><View
              /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(formRef)"
            >修改密码</el-button
          >
          <el-button @click="resetForm(formRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { reactive, ref, computed } from 'vue'
import store from '../store'
import qs from 'qs'
import { ElMessage } from 'element-plus'
import { User, Lock, Unlock, View, Hide } from '@element-plus/icons-vue'
import { updatepwdRequset } from '../api/user.js'

const labelPosition = ref('right')
const formRef = ref()
const formData = reactive({
  oldPwd: '',
  newPwd: '',
  verify: '',
})
const rules = reactive({
  oldPwd: [
    {
      required: true,
      message: '原密码不能为空!',
      trigger: 'blur',
    },
  ],
  newPwd: [
    {
      required: true,
      message: '新密码不能为空!',
      trigger: 'blur',
    },
  ],
  verify: [
    {
      required: true,
      message: '确认密码不能为空!',
      trigger: 'blur',
    },
  ],
})
const blinkOldPwd = ref(false)
const blinkNewPwd = ref(false)
const blinkVerify = ref(false)

// 眼睛点击事件
const blinkHandler = (e) => {
  console.log(e)
  switch (e) {
    case 'blinkOldPwd':
      blinkOldPwd.value = !blinkOldPwd.value
      break

    case 'blinkNewPwd':
      blinkNewPwd.value = !blinkNewPwd.value
      break

    case 'blinkVerify':
      blinkVerify.value = !blinkVerify.value
      break

    default:
      break
  }
}

// 提交修改
const submitForm = async (formRef) => {
  if (!formRef) return
  await formRef.validate(async (valid, fields) => {
    if (valid) {
      const params = qs.stringify({
        oldPwd: formData.oldPwd,
        newPwd: formData.newPwd,
      })
      const { data: res } = await updatepwdRequset(params)
      // console.log(res)
      const { status, message } = res
      if (status !== 0) ElMessage.error(message)
      ElMessage.success(message)
    } else {
      ElMessage.error('校验失败!')
    }
  })
}

// 重置
const resetForm = (formRef) => {
  if (!formRef) return
  formRef.resetFields()
}
</script>
